<!--
 * @Descripttion: 
 * @Author: 银河以北
 * @Date: 2023-05-22 15:08:58
 * @LastEditors: 银河以北
 * @LastEditTime: 2024-08-28 22:59:27
-->
<template>
    <div class="app-container flex min-w-screen min-h-screen bg-white">
        <!-- 左侧菜单 -->
        <div class="menu-container relative w-[249px] h-screen overflow-y-auto bg-white border-r border-[#edf2f9]">
            <!-- logo组件 -->
            <Logo @click="toTest()" />
            <!-- 表单 -->
            <div class="form-container w-full p-[10px] ">
                <el-form :model="codeImgForm" label-width="100px">
                    <el-collapse v-model="activeNames" :accordion='true'>
                        <!-- 画布 -->
                        <el-collapse-item name="canvans">
                            <template #title>
                                <div class="text-sm font-bold">画布</div>
                            </template>
                            <div>
                                <el-form-item label="宽度">
                                    <el-input-number v-model="codeImgForm.canvans.width" :min="1"
                                        controls-position="right" placeholder="auto" />
                                </el-form-item>
                                <el-form-item label="高度">
                                    <el-input-number v-model="codeImgForm.canvans.height" :min="1"
                                        controls-position="right" placeholder="auto" />
                                </el-form-item>
                                <el-form-item label="内边距">
                                    <el-input-number v-model="codeImgForm.canvans.padding" :min="1"
                                        controls-position="right" placeholder="auto" />
                                </el-form-item>
                                <el-form-item label="背景颜色">
                                    <div class="w-full flex justify-end">
                                        <el-color-picker v-model="codeImgForm.canvans.backgroundColor" show-alpha />
                                    </div>
                                </el-form-item>
                            </div>
                        </el-collapse-item>

                        <!-- 卡片 -->
                        <el-collapse-item name="card">
                            <template #title>
                                <div class="text-sm font-bold">卡片</div>
                            </template>
                            <div>
                                <el-form-item label="样式">
                                    <el-select v-model="codeImgForm.window.style" placeholder="窗口样式">
                                        <el-option label="MacOs" value="MacOs" />
                                        <el-option label="Windows" value="Windows" />
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="标题">
                                    <div class="w-full flex justify-end">
                                        <el-switch v-model="codeImgForm.window.title" />
                                    </div>

                                </el-form-item>
                                <el-form-item label="宽度">
                                    <el-input-number v-model="codeImgForm.window.width" :min="1"
                                        controls-position="right" placeholder="auto" />
                                </el-form-item>
                                <el-form-item label="高度">
                                    <el-input-number v-model="codeImgForm.window.height" :min="1"
                                        controls-position="right" placeholder="auto" />
                                </el-form-item>
                            </div>
                        </el-collapse-item>

                        <!-- 编辑 -->
                        <el-collapse-item name="editor">
                            <template #title>
                                <div class="text-sm font-bold">编辑</div>
                            </template>
                            <div>
                                <el-form-item label="主题">
                                    <el-select v-model="codeImgForm.editor.theme" placeholder="主题"
                                        @change="changeTheme">
                                        <el-option v-for="(item,index) in themeLists" :label="item" :value="item"
                                            :key="index" />

                                    </el-select>
                                </el-form-item>
                                <el-form-item label="自动检测语言">
                                    <div class="w-full flex justify-end">
                                        <el-switch v-model="codeImgForm.editor.autodetect" />
                                    </div>

                                </el-form-item>
                                <el-form-item label="语言" v-show="!codeImgForm.editor.autodetect">
                                    <el-select v-model="codeImgForm.editor.language" placeholder="语言"
                                        @change="changeLanguage">
                                        <el-option v-for="(item,index) in languageLists" :label="item" :value="item"
                                            :key="index" />

                                    </el-select>
                                </el-form-item>
                            </div>
                        </el-collapse-item>


                    </el-collapse>
                </el-form>
                <div class="w-full mt-[20px]">
                    <el-button class="w-full" type="danger" plain @click="resetCodeImgForm">重置</el-button>
                </div>
            </div>
            <!-- blog -->
            <Footer class="absolute bottom-0"></Footer>

        </div>
        <!-- 右侧主容器 -->
        <div class="mian-container w-[calc(100%-250px)]">
            <!-- 头部容器 -->
            <div
                class="mian-header-container w-full h-[89px] p-[10px] flex justify-between items-center border-b border-[#edf2f9]">
                <div class="create-project">
                    <el-button type="success" size="large" :icon="DocumentAdd" style="background-color: #41B883;"
                        @click="createProject()">新建项目
                    </el-button>
                </div>
                <div class="download" style="display: flex;">
                    <el-button type="primary" size="large" :icon="Download"
                        style="background-color: #2C7BE5;margin-right: 20px;" @click="captureCanvas()">下载文件
                    </el-button>
                    <!-- 登录组件 -->
                    <Login />
                </div>
            </div>
            <!-- canvas -->
            <div class="canvas-container w-full min-h-[calc(100%-90px)] flex justify-center bg-[#F9FBFD]">
                <div ref="canvas" id="canvas"
                    class="canvas m-[50px] border-[3px] shrink-0 self-start  rounded-[10px] border-[#e3ebf6] overflow-hidden"
                    :style="[canvasStyle]">
                    <div ref="codeRef" class="code bg-[#151718] p-[14px] rounded-md min-h-[90px]  overflow-hidden"
                        :style="[codeStyle]">
                        <div class="code-header w-full mb-[14px]">
                            <CodeHeader :style="codeImgForm.window.style" :button="codeImgForm.window.button"
                                :title="codeImgForm.window.title" :titleText="codeImgForm.window.titleText"
                                @changeTitleText="changeTitleText" />
                        </div>
                        <div class="code-container w-full overflow-hidden relative">
                            <textarea ref="textareaRef" class="editor-textarea relative z-2" autoComplete='off'
                                spellCheck="false" tabIndex="-1" autoCapitalize='off' v-model="code"
                                @input="changeTextareaHeight($event)"></textarea>
                            <div class="code-formatted absolute top-0 z-1"
                                style="color: #fefdfd;background: transparent;" v-html="handerCode">
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>

    </div>
</template>

<script setup>
    import html2canvas from 'html2canvas'
    import Canvas2Image from '@/utils/canvas2Image.js';
    import {
        ElMessage
    } from 'element-plus'

    // vue 路由
    import {
        useRouter
    } from "vue-router";
    const router = useRouter()

    // 引入logo组件
    import Logo from '@/components/Logo/index.vue'

    // 引入Footer
    import Footer from '@/components/Footer/index.vue'

    // 引入codeHeader组件
    import CodeHeader from '@/components/CodeHeader/index.vue'

    // 引入登录组件
    import Login from '@/components/LoginBox/index.vue'


    import hljs from 'highlight.js';

    import {
        themeList,
    } from '@/utils/index'

    // el 图标
    import {
        DocumentAdd,
        Download,
        UserFilled
    } from '@element-plus/icons-vue'

    import {
        ref,
        reactive,
        computed,
        watch,
        nextTick,
        onMounted
    } from 'vue'

    // 读取样式文件
    const themeLists = themeList()

    let languageLists = hljs.listLanguages()

    let code = ref(`console.log('hello codeimg')`);

    let handerCode = ref('')

    // 控制code和textarea显示
    let showCode = ref(true)

    // 文本域dom
    let textareaRef = ref(null);

    // highlightjsRef
    let highlightjsRef = ref(null)

    // code容器
    let codeRef = ref(null)

    // 控制手风琴
    const activeNames = ref([''])

    // 整个form对象
    let codeImgForm = reactive({
        // 画布大小
        canvans: {
            width: null,
            height: null,
            padding: 20,
            backgroundColor: null
        },
        window: {
            style: 'MacOs',
            title: true,
            button: true,
            width: null,
            height: null,
            titleText: 'Title'
        },
        editor: {
            theme: 'vs2015',
            language: 'auto',
            fontSize: 16,
            lineNumbers: false,
            autodetect: true,
        }
    })

    // 改变标题
    const changeTitleText = (value) => {
        codeImgForm.window.titleText = value
    }

    // canvas样式
    const canvasStyle = computed(() => {
        const {
            canvans: {
                width,
                height,
                padding,
                backgroundColor
            }
        } = codeImgForm

        // 宽度
        let canvansWidth = 0
        if (width < 0 || width == null) {
            canvansWidth = '400px'
        } else {
            canvansWidth = width + 'px'
        }


        // 高度
        let canvanHeight = 0
        if (height < 0 || height == null) {
            canvanHeight = '300px'
        } else {
            canvanHeight = height + 'px'
        }

        // 内边距
        let canvanPadding = 0
        if (padding < 0 || padding == null) {
            canvanPadding = '20px'
        } else {
            canvanPadding = padding + 'px'
        }

        return {
            width: canvansWidth,
            // height: canvanHeight,
            padding: canvanPadding,
            backgroundColor
        }
    })

    // code 样式
    const codeStyle = computed(() => {
        const {
            window: {
                width,
                height,
            }
        } = codeImgForm

        // 宽度
        let codeWidth = 0
        if (width < 0 || width == null) {

            codeWidth = 'auto'
        } else {
            codeWidth = width + 'px'
        }

        // 高度
        let codeHeight = 0
        if (height < 0 || height == null) {
            codeHeight = '90px'
        } else {
            codeHeight = height + 'px'
        }

        return {
            width: codeWidth,
            minHeight: codeHeight,
        }
    })
    // 切换主题
    const changeTheme = (item = 'vs2015') => {
        const themeColor = `/style/highlight/${item}.css`
        const constlink = document.createElement('link')
        constlink.type = 'text/css'
        constlink.rel = 'stylesheet'
        constlink.href = themeColor
        document.head.appendChild(constlink)
    }

    // 切换语言
    const changeLanguage = (item) => {
        codeImgForm.editor.language = item
        hljsCode()
    }

    watch(() => code.value, () => {
        hljsCode()
    })

    // 监听是否要自动检测语言
    watch(() => codeImgForm.editor.autodetect, () => {
        hljsCode()
    })

    // 绘制高亮代码
    const hljsCode = () => {
        let codes = ''
        // 自动检测
        if (codeImgForm.editor.autodetect || codeImgForm.editor.language == 'auto') {
            codes = hljs.highlightAuto(code.value)
        } else {
            // 自己指定
            codes = hljs.highlight(code.value, {
                language: codeImgForm.editor.language,
                ignoreIllegals: true
            })
        }
        handerCode.value = codes.value
        return codes
    }


    // 初始化函数
    const init = () => {
        hljsCode()
        changeTextareaHeight()
        setTimeout(() => {
            changeTheme()
        }, 500)
    }

    onMounted(() => {
        init()
    })

    const toTest = () => {
        // router.push('/about')
    }

    // 重置表单
    const resetCodeImgForm = () => {
        Object.assign(codeImgForm, {
            // 画布大小
            canvans: {
                width: null,
                height: null,
                padding: 20,
                backgroundColor: null
            },
            window: {
                style: 'MacOs',
                title: true,
                button: true,
                width: null,
                height: null
            },
            editor: {
                theme: 'vs2015',
                language: 'auto',
                fontSize: 16,
                lineNumbers: false,
                autodetect: true,
            }
        })
    }

    // canvas dom
    const canvas = ref(null)

    // 下载图片
    const captureCanvas = async () => {
        const canvasOption = {
            scale: 2,
            dpi: 300,
        }
        const width = codeImgForm.canvans.width ? codeImgForm.canvans.width : 400
        const height = codeImgForm.canvans.height ? codeImgForm.canvans.height : 300
        const fileName = codeImgForm.window.titleText
        html2canvas(canvas.value, canvasOption).then(canvas => {
            // canvas 保存图片
            Canvas2Image.saveAsPNG(canvas, undefined, undefined, fileName)
        })
    }

    // 文本域高度自适应
    const changeTextareaHeight = () => {
        let textarea = textareaRef.value
        textarea.style.height = 'auto';
        const height = textarea.scrollHeight;
        if (height) { // 改变textarea高度达到自适应
            textarea.style.height = height + "px";
        }
    }

    // 新建项目
    const createProject = () => {
        ElMessage({
            message: '功能开发中',
            type: 'info',
            plain: true,
        })
    }
</script>

<style lang="scss" scoped>
    .editor-textarea {
        border: none;
        resize: none;
        background: transparent;
        z-index: 2;
        color: transparent;
        caret-color: white;
        text-size-adjust: none;
        outline: none;
        width: 100%;
        height: auto;
    }

    .code-formatted,
    .editor-textarea {
        padding: 16px 16px 21px 16px;
        margin: 0;
        font-size: 15px;
        font-weight: 500;
        font-family: 'JetBrains Mono', monospace;
        font-variant-ligatures: none;
        grid-column: 1/1;
        grid-row: 1/1;
        tab-size: 2;
        white-space: pre-wrap;
        box-sizing: border-box;
    }
</style>